<template>
  <el-container>
    <el-header class="header">
      <h1>{{ restaurant.name }}</h1>
      <el-rate :value="restaurant.rating" disabled />
    </el-header>
    <el-main>
      <el-row gutter="20">
        <el-col :span="6">
          <img :src="restaurant.image" class="restaurant-image" alt="餐厅图片"/>
        </el-col>
        <el-col :span="16">
          <div class="restaurant-info">
            <p>{{ restaurant.description }}</p>
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <h3 class="section-title">菜品列表</h3>
      <el-table :data="restaurant.dishes" style="width: 100%">
        <el-table-column prop="name" label="菜品名称"/>
        <el-table-column prop="price" label="价格"/>
        <el-table-column label="图片">
          <template v-slot="scope">
            <img :src="scope.row.image" class="dish-image" alt="菜品图片"/>
          </template>
        </el-table-column>
      </el-table>
      <el-divider></el-divider>
      <h3 class="section-title">用户评价</h3>
      <el-row v-for="review in restaurant.reviews" :key="review.id" class="review-item">
        <el-col :span="24">
          <div class="review-content">
            <p><strong>{{ review.title }}</strong></p>
            <p>{{ review.comment }}</p>
            <el-rate :value="review.rating" disabled/>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      restaurant: null,  // 初始为空
    };
  },
  created() {
    const restaurantId = this.$route.params.id;
    console.log(`加载餐厅ID: ${restaurantId}`);
    this.fetchRestaurantData(restaurantId);
  },
  methods: {
    fetchRestaurantData(id) {
      this.restaurant = {
        name: '中式餐厅',
        image: '/images/restaurantA.jpg',
        rating: 4.5,
        description: '这家中式餐厅以其地道的中华美食和卓越的服务而闻名。餐厅内部装潢融合了传统与现代元素，营造出温馨而雅致的用餐氛围。墙上挂着中国风的画作，木质桌椅和柔和的灯光相得益彰，让人仿佛置身于古代庭院之中。厨师团队精心挑选新鲜食材，每一道菜都经过匠心独运的烹饪，无论是经典的宫保鸡丁、红烧肉，还是地方特色的小吃，都能在这里找到它们的身影。服务人员训练有素，他们以热情周到的态度，确保每位顾客都能享受到宾至如归的体验。无论是家庭聚餐、朋友小聚还是商务宴请，这家餐厅都能满足您的需求，让您在品尝美味的同时，也能感受到中华饮食文化的深厚底蕴。',
        dishes: [
          {name: '宫保鸡丁', price: 38, image: '/images/gbjd.jpg'},
          {name: '麻辣火锅', price: 58, image: '/images/mlhg.jpg' }
        ],
        reviews: [
          {id: 1, title: '美味至极', comment: '这是我吃过的最好吃的宫保鸡丁。', rating: 5},
          {id: 2, title: '服务周到', comment: '服务员非常热情，食物也很美味。', rating: 4}
        ]
      };
    }
  }
};
</script>

<style scoped>
.header {
  background-color: #f0f2f5;
  padding: 20px;
  text-align: center;
}

.restaurant-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  object-fit: cover;
}

.restaurant-info {
  margin-top: 20px;
}

.restaurant-info p {
  font-size: 18px; /* 增大字体大小 */
  line-height: 1.6; /* 增加行高，提升可读性 */
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
}

.review-item {
  margin-bottom: 20px;
}

.review-content {
  background-color: #fafafa;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.dish-image {
  max-width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}
</style>
